<template>
	<view class="interview">
		<uv-form
			labelPosition="top"
			labelWidth="90px"
			errorType="toast"
			ref="form"
			:labelStyle="{ fontSize: '30rpx', color: '#767a82' }"
			:model="form"
			:rules="rules"
		>
			<uv-form-item label="面试日期" prop="date" required borderBottom>
				<picker mode="date" @change="handleSelectDate">
					<uv-input v-model="form.date" disabled placeholder="请选择面试日期"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="面试时间" prop="time" required borderBottom>
				<view class="content">
					<picker
						mode="time"
						@change="
							e => {
								form.startTime = e.detail.value;
							}
						"
					>
						<uv-input v-model="form.startTime" disabled placeholder="开始时间"></uv-input>
					</picker>
					<text>至</text>
					<picker
						mode="time"
						@change="
							e => {
								form.endTime = e.detail.value;
							}
						"
					>
						<uv-input v-model="form.endTime" disabled placeholder="结束时间" inputAlign="center"></uv-input>
					</picker>
				</view>
			</uv-form-item>
			<uv-form-item label="面试地址" prop="userInfo.sex" required borderBottom @click="handleSelectAddress">
				<uv-input v-model="form.address" disabled placeholder="请选择面试地址"></uv-input>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
		</uv-form>

		<view class="confirm bottom" v-if="applyId === null">
			<view class="button" @click="handleSubmit">确认</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { InterviewInvitation, getApplyDetail } from '@/apis/apply/apply.js';
import socketManager from '@/utils/websocket.js';

export default {
	data() {
		return {
			friendId: '',
			jobName: '',
			applyId: null,
			form: {
				date: '',
				startTime: '',
				endTime: '',
				address: ''
			},
			rules: {
				date: { required: true, trigger: 'blur', message: '面试日期不能为空' },
				startTime: { required: true, trigger: 'chang', message: '开始时间不能为空' },
				endTime: { required: true, trigger: 'blur', message: '结束时间不能为空' },
				address: { required: true, trigger: 'blur', message: '面试地址不能为空' }
			}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	onLoad(option) {
		this.friendId = option.friendId;
		this.jobName = option.name;
		this.applyId = option.id || null;
		if (this.applyId) {
			this.initData();
		}
	},
	methods: {
		async initData() {
			const res = await getApplyDetail(this.applyId);
			this.form = res.data;
			this.form.date = uni.$uv.timeFormat(this.form.date);
		},
		// 提交
		handleSubmit() {
			this.$refs['form']
				.validate()
				.then(async () => {
					const { userInfo, friendId, jobName, form } = this;
					const formData = { ...form, friendId, jobName, userId: userInfo.id, nickName: userInfo.nickname };
					const res = await InterviewInvitation(formData);
					console.log(res);
					if (res.code === 200) {
						// 通知面试预约
						const socket = socketManager.getSocket();
						socket.emit('apply', { userId: userInfo.id, friendId, info: res.data });

						uni.showToast({ icon: 'none', title: '预约成功' });
						uni.navigateBack();
					}
				})
				.catch(error => {
					console.log(error);
				});
		},
		// 选择日期
		handleSelectDate(e) {
			this.form.date = e.detail.value;
		},
		// 选择面试地址
		handleSelectAddress() {
			uni.chooseLocation({
				success: res => {
					this.form.address = res.address;
				},
				fail: err => {
					console.log(err);
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.interview {
	padding: 30rpx;
	::v-deep .uv-input__content__prefix-icon {
		margin-right: 0;
	}
	.content {
		display: flex;
		text {
			display: inline-block;
			margin: 0 20rpx;
			font-size: 32rpx;
		}
	}
}
</style>
